<template>
	<div class="app-container">

		<div>

			<div class="flex flex-wrap h-8 leading-8 mb-6">
				<span class="text-[red] mt-1">*</span>
				<div class="ml-2">{{ $t('public.password') }}：</div>
				<div class="w-2/12">
					<el-input v-model="data.pwd" :placeholder="$t('message.pleaseloginPass')" show-password="true"
						clearable />
				</div>
			</div>

			<div v-prmis="'machine_group_mg_getList'">
				<el-cascader :placeholder="$t('message.selectGroup')" style="width:40%;margin-right: 1%;" clearable
					:props="propss" v-model="data.groupValue" @change="getmping($event, 1)"
					@visible-change="onVisibleChange" />

				<el-select v-model="data.info.macping" :placeholder="$t('message.pleaseMachine')" clearable filterable
					style="width:40%;" @change="getmping($event, 2)">
					<el-option v-for="item in data.maclist" :key="item.m_id"
						:label="item.machine_id + '-' + item.machine_name" :value="item.machine_id" />
				</el-select>
			</div>

			<div class="w-full dashed mt-2 p-2" v-if="data.grouping.length != 0">
				<el-tag v-for="item, key of data.grouping" :key="key" closable :disable-transitions="false" class="mr-2"
					:type="item.mg_id == undefined ? '' : 'warning'" size="large" @close="handleClose(key)">
					{{ item.machine_id || '' }}{{ item.mg_name || item.label || ' - ' + item.machine_name }}
				</el-tag>
			</div>

		</div>

		<div class="mt-4">
			<el-alert :title="$t('machine.infos.noplease')" type="warning" :closable="false" />
		</div>

		<div class="mt-4">
			<config ref="refconfig" @submit="submit" :key="keyA" />
		</div>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import config from '../common/llocation_config.vue';
import { getmachineList, updateMoreMc, addhelpList, updatemachineMore } from '@/api/machine';
import { getgroupList, getListgroupmg } from "@/api/machine_type";
import { checkPwd } from "@/api/common";
let refconfig = ref<any>();
let keyA = ref(0)
let data = reactive({
	groupValue: [],
	nodesData: [],
	info: {
		group: '',
		macping: ''
	},
	checketies: [], // 提交的设备
	maclist: [], // 设备列表
	macgroupList: [], // 设备分组
	bindmacping: [], // 设备分组绑定的设备
	grouping: [], // 展示分组/设备
	pwd: '', // 当前账号密码
})
const propss = reactive(
	{
		checkStrictly: true,
		lazy: true,
		multiple: false,
		async lazyLoad(node: any, resolve: any) {
			const { level, value } = node
			let nodes = await getgroupList({ pid: value });
			if (nodes.state == 100 || nodes.state == 300) {
				resolve([]);
			}
			const nodesa = nodes.data.map((item) => ({
				value: item.mg_id,
				label: item.mg_id + '-' + item.mg_name
			}))
			nodes.data.forEach(item => {
				data.nodesData.push({
					value: item.mg_id,
					label: item.mg_id + '-' + item.mg_name
				})
			})
			resolve(nodesa);
		}
	}
)
// 获取接口数据
let geturlinfo = async () => {

	// 获取设备信息
	await getmachineList().then(res => {
		if (res.state == 200) {
			data.maclist = res.data
		}
	})

	// 获取设备分组
	await getgroupList().then(res => {
		if (res.state == 200) {
			data.macgroupList = res.data
		}
	})
	// 获取分组中的设备
	await getListgroupmg().then(res => {
		if (res.state == 200) {
			data.bindmacping = res.data
		}
	})
}
let onVisibleChange = () =>{
	data.groupValue = []
}
// 选中分组/设备
let getmping = (e, k) => {
	let obj = ''
	let status = true
	if (k == 1) {
		// 分组
		data.nodesData.map((item) => {
			if (item.value === e[e.length - 1]) obj = item
		})
		for (let item of data.grouping) {
			if (item.value == obj.value) {
				status = false
			}
		}
	} else {
		// 设备
		data.maclist.map((item) => { if (item.machine_id === e) obj = item })
		for (let item of data.grouping) {
			if (item.m_id == obj.m_id) {
				status = false
			}
		}
		data.info.macping = ''
	}
	if (status) {
		data.grouping.push(obj)
	}
}

// 删除选中的设备分组/设备
let handleClose = (e) => {
	data.grouping.splice(e, 1)
}

// 保存 e:配置信息、k:帮助信息、l:主体信息
let submit = async (e, k, l) => {
	if (!data.pwd) {
		ElMessage({
			message: $t('message.pleaseEnterPass'),
			type: 'error'
		})
		return
	}

	await checkPwd({ pwd: data.pwd })
	let status = false
	let e_status = false
	let k_status = false
	let l_status = false

	// 主体信息
	for (let key in l) {
		status = true
		l_status = true
	}
	// 配置信息
	for (let key in e) {
		status = true
		e_status = true
	}
	// 帮助信息
	if (k.length != 0) {
		status = true
		k_status = true
	}
	let machine = []
	if (data.grouping.length != 0) {
		let grouping = []
		for (let item of data.grouping) {
			// 设备
			if (item.mg_id != undefined) {
				data.bindmacping.map((ime) => {
					if (item.mg_id === ime.mg_id) {
						grouping.push(ime.m_id)
					}
				})
			}

			if (item.m_id != undefined) {
				grouping.push(item.m_id)
			}
			// 设备分组
			if (item.value != undefined) {
				data.bindmacping.map((ime) => {
					if (item.value === ime.mg_id) {
						if(ime.m_id !== undefined){
							grouping.push(ime.m_id)
						}	
					}
				})
			}
		}
		// 设备分组放入指定设备中
		machine = [...machine, ...grouping]
	} else {
		let machineing = []
		data.maclist.forEach(item => {
			machineing.push(item.m_id)
		})
		machine = [...machine, ...machineing]
	}

	machine = [...new Set(machine)]

	data.checketies = machine
	if (data.checketies.length == 0) {
		ElMessage({
			message: $t('message.pleaseEnterMachine'),
			type: 'error'
		})
		return
	}
	if (!status) {
		ElMessage({
			message: $t('message.pleaseFillmodifyContent'),
			type: 'error'
		})
		return
	}

	// 主体信息
	let mlinfo = []
	let mcinfo = JSON.stringify(l)
	if (l_status) {
		for (let i = 0; i < data.checketies.length; i++) {
			let objs = JSON.parse(mcinfo)
			objs.m_id = data.checketies[i]
			mlinfo.push(objs)
		}
	}


	// 配置信息
	let array = []
	let info = JSON.stringify(e)
	if (e_status) {
		for (let i = 0; i < data.checketies.length; i++) {
			let obj = JSON.parse(info)
			obj.m_id = data.checketies[i]
			array.push(obj)
		}
	}

	refconfig.value.getloding(true)
	// 主体信息
	if (mlinfo.length != 0) {
		await updatemachineMore({ 'mList': mlinfo })
	}

	// 配置信息
	if (array.length != 0) {
		await updateMoreMc({ mcList: array })
	}

	// 帮助信息
	if (k_status) {
		data.maclist.map((item => {
			for (let ime of data.checketies) {
				if (item.m_id == ime) {
					let help = {
						m_id: item.m_id,
						machine_id: item.machine_id,
						help_list: k
					}
					gethelp(help)
				}
			}
		}))
	}
	ElMessage({
		message: $t('message.modifySuccess'),
		type: 'success'
	})
	keyA.value++
}

let gethelp = async (e) => {
	await addhelpList(e)
}

geturlinfo()

</script>
